<template>
	<view :class="[primarySize()]">
		<view class="plr10 flex-box">
			<!-- 判断是否为SVG格式，SVG格式用view渲染 -->
			<view v-if="isSvgAvatar" class="user_img svg-avatar" v-html="svgContent" @click="bindEditPersonalInfo"></view>
			<image v-else :src="summary.avatar" mode="aspectFill" class="user_img" @click="bindEditPersonalInfo"></image>
			<view class="flex-grow-1 plr30">

				<view class="m-ellipsis fwb fs48 colf lh66">{{summary.nickname}}</view>
				<view class="mt15 fs26 colf lh36">
					<text v-if="summary.resume && summary.resume.personal && summary.resume.personal.work_experience">{{summary.resume.personal.work_experience.name}}| </text><text v-if="summary.resume && summary.resume.personal && summary.resume.personal.education_level">
						{{summary.resume.personal.education_level.name}} |</text><text
						v-if="summary.resume && summary.resume.personal && summary.resume.personal.age"> {{summary.resume.personal.age+'岁'}}</text>
				</view>
			</view>
			<view class="switch_nav flex-box flex-center" @click="changeRole()">
				<image :src="iconPath('icon_switch.png')" mode="aspectFill"></image>
				<view class="pl5">切换招聘</view>
			</view>
		</view>

		<view class="mt35 flex-box colf">
			<view class="flex-grow-1 tc" @click="onJump('/pages/user/my_job_interest',1)">
				<view class="fs48 fwb lh58">
					<text>{{summary.job_intention_count || 0 || 0}}</text>
				</view>
				<view class="mt5 fs24 lh34"> 求职意向</view>
			</view>
			<view class="flex-grow-1 tc" @click="onJump('/pages/user/recommend_jobs',1)">
				<view class="fs48 fwb lh58">
					<text>{{summary.recommend_jobs_count || 0}}</text>
				</view>
				<view class="mt5 fs24 lh34">岗位推荐</view>
			</view>
			<view class="flex-grow-1 tc" @click="onJump('/pages/public/notice_center',1)">
				<view class="fs48 fwb lh58">
					<text :class="{dot: summary.message_count>0}">{{summary.message_count || 0}}</text>
				</view>
				<view class="mt5 fs24 lh34">消息中心</view>
			</view>
			<view class="flex-grow-1 tc" @click="onJump('/pages/company/my_commission',1)">
				<view class="fs48 fwb lh58">
					<text>{{userinfo.money || 0}}</text>
				</view>
				<view class="mt5 fs24 lh34">我的佣金</view>
			</view>

		</view>
		<view class="mid_box flex-box">
			<navigator hover-class="none" url="/pages/public/interview_invitations"
				class="flex-grow-1 part_item">
				<view>
					<image src="https://admin.mosizp.cn/static/public/icon_profile1.png" mode="aspectFit"></image>
					<view class="red_cir" v-if="summary.interview_count>0">{{summary.interview_count}}</view>
				</view>
				<view>面试邀请</view>
			</navigator>
			<view class="flex-grow-1 part_item" @click="onJump('/pages/user/apply_record',1)">
				<view>
					<image src="https://admin.mosizp.cn/static/public/icon_profile2.png" mode="aspectFill"></image>
				</view>
				<view class="fs24 col6 lh34 mt20">申请记录</view>
			</view>
			<view class="flex-grow-1 part_item" @click="onJump('/pages/user/my_fav',1)">
				<view>
					<image src="https://admin.mosizp.cn/static/public/icon_profile3.png" mode="aspectFill"></image>
				</view>
				<view class="fs24 col6 lh34 mt20">我的收藏</view>
			</view>
			<view @click="onJump('/pages/company/my_team',1)" class="flex-grow-1 part_item">
				<view>
					<image src="https://admin.mosizp.cn/static/public/icon_profile4.png" mode="aspectFit"></image>
				</view>
				<view>邀请好友</view>
			</view>
		</view>

		<view class="box1 flex-box" @click="onJump('/pages/user/my_resume',1)">
			<view class="mine_img">
				<image :src="iconPath('icon_profile.png')" mode="aspectFill"></image>
			</view>
			<view class="flex-grow-1 pl20">
				<view class="fs32 fwb col3">发布求职简历</view>
				<view class="mt10 fs24 col6">完善简历可提高录取率</view>
			</view>
			<template v-if="show">
				<niceui-progress type="circle" :percentage="summary.info_complete || 0" ref="circle2"
					:color="primaryColor()" :width="50" :strokeWidth="3.5" strokeLinecap="butt"
					:textColor="primaryColor()" :textSize="15" :text="'完成率'"></niceui-progress>
			</template>
			<template v-else>
				<niceui-progress type="circle" :percentage="summary.info_complete || 0" ref="circle2"
					:color="primaryColor()" :width="50" :strokeWidth="3.5" strokeLinecap="butt"
					:textColor="primaryColor()" :textSize="15" :text="'完成率'"></niceui-progress>
			</template>
		</view>
		<view class="box">

			<view @click="onJump('/pages/user/resume_files',1)" class="info_item flex-box">
				<image src="https://admin.mosizp.cn/static/public/icon_files.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">上传个人生活照</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" class="arrow-r"></image>
			</view>
			<view @click="onJump('/pages/public/odd_job_manage',1)" class="info_item m-list-flex">
				<image src="https://admin.mosizp.cn/static/public/icon_gl.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">零工管理</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" class="arrow-r"></image>
			</view>
			<view @click="onJump('/pages/user/individual_registration',1)" class="info_item m-list-flex">
				<image src="https://admin.mosizp.cn/static/public/icon_intention.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">零工求职意向</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" class="arrow-r"></image>
			</view>
			<view @click="onJump('/pages/user/wait_appraise',1)" class="info_item m-list-flex">
				<image src="https://admin.mosizp.cn/static/public/icon57.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">待评价</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" class="arrow-r"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/user/my_view',1)">
				<image src="https://admin.mosizp.cn/static/public/icon_myview.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">我看过的</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/user/who_view',1)">
				<image src="https://admin.mosizp.cn/static/public/icon_whoview.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">谁看过我</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view @click="onJump('/pages/user/evaluate_list',1)" class="info_item flex-box">
				<image src="https://admin.mosizp.cn/static/public/icon_white.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">我的评论</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view @click="onJump('/pages/public/privacy_set',1)" class="info_item flex-box">
				<image src="https://admin.mosizp.cn/static/public/icon_prc.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">隐私设置</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
		</view>

		<view class="box">
			<view class="flex-box info_item" @click="onJump('/pages/public/feedback',1)">
				<image src="https://admin.mosizp.cn/static/public/icon_rec.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">意见反馈</view>

				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/public/help_center',1)">
				<image src="https://admin.mosizp.cn/static/public/icon_help.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">帮助中心</view>

				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="flex-box info_item contact-btn" open-type="contact"
					session-from="user_profile"
					send-message-title="用户咨询"
					send-message-path="/pages/public/profile"
					show-message-card="true">
				<image src="https://admin.mosizp.cn/static/public/kefu.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">联系客服</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="flex-box info_item" @click="openCustomerService">
				<image src="https://admin.mosizp.cn/static/public/kefu.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">联系客服</view>
				<image src="https://admin.mosizp.cn/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "user-proflie",
		data() {
			return {
				mesCount: 0,
				userinfo: {},

				summary: {
					avatar: '',
					nickname: '',
					resume: {
						personal: null,
						complete_percent: 0
					},
					message_count: 0,
					not_comment_count: 0,
					info_complete: 0
				},
				show: false,
				isSvgAvatar: false,
				svgContent: '',
			};
		},
		created() {
			let page = this;
		},
		onShow() {
			if (this.$refs.circle2) {
				this.$refs.circle2.drawCanvas();
				this.$forceUpdate()
			}
		},
		mounted() {
			let user = this.$core.getUserinfo();
			// if (user && user.group_id == 1) {
			// 	this.refresh();
			// }
			uni.$on(getApp().globalData.Events.UcenterInfoCompleteChange, this.eventOnUcenterInfoCompleteChange, this);
			uni.$on(getApp().globalData.Events.InterviewCommentAdd, this.eventOnInterviewCommentAdd, this);
			uni.$on(getApp().globalData.Events.ClearMessageCount, this.eventOnClearMessageCount, this);
			//未读消息
			if (getApp().globalData.chat_config.SocketTask) {
				this.$chatIM.setMessageBadge(false)
			}
			uni.$on(getApp().globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount, this);
		},
		beforeDestroy() {
			uni.$off(getApp().globalData.Events.UcenterInfoCompleteChange, this.eventOnUcenterInfoCompleteChange, this);
			uni.$off(getApp().globalData.Events.InterviewCommentAdd, this.eventOnInterviewCommentAdd, this);
			uni.$off(getApp().globalData.Events.ClearMessageCount, this.eventOnClearMessageCount, this);
			uni.$off(getApp().globalData.Events.eventWebsocketMessageCount, this.eventWebsocketMessageCount, this);
		},
		methods: {
			refreshProgress() {
				if (this.$refs.circle2) {
					this.$refs.circle2.drawCanvas(); // 强制重绘
				}
			},
			refresh: function(showLoading = true) {
				let component = this;
				this.$core.get({
					url: 'xilujob.user/info',
					loading: showLoading,
					success(ret, data) {
						component.userinfo = ret.data.userinfo;
						component.summary = ret.data.summary;
						// 检查是否为SVG头像
						if (component.summary.avatar && component.summary.avatar.startsWith('data:image/svg+xml')) {
							component.isSvgAvatar = true;
							// 解码SVG内容
							try {
								const base64Data = component.summary.avatar.split(',')[1];
								const svgString = atob(base64Data);
								component.svgContent = svgString;
							} catch (e) {
								console.error('SVG解码失败', e);
								component.isSvgAvatar = false;
							}
						} else {
							component.isSvgAvatar = false;
						}
						component.show = true
						component.$forceUpdate()
					}
				});
			},
			forceUpdate(){
				this.$forceUpdate()
			},
			onJump(url, needLogin) {
				if (needLogin) {
					if (!this.$core.getUserinfo(true)) {
						return true;
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			changeRole() {
				this.$emit("changeRole", {})
			},
			eventOnUcenterInfoCompleteChange: function(complete) {
				this.summary.info_complete = complete;
			},
			eventOnInterviewCommentAdd: function(data) {
				this.summary.not_comment_count = data.count;
			},
			eventOnClearMessageCount: function(count) {
				let total = this.summary.message_count - count;
				this.summary.message_count = total < 0 ? 0 : total;
				this.eventWebsocketMessageCount();
			},
			eventWebsocketMessageCount(data) {
				let message_count = this.summary.message_count || 0;
				let megNum = getApp().globalData.chat_config.messageCount;
				this.mesCount = message_count;
				// this.$forceUpdate()
			},
			bindEditPersonalInfo() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				uni.navigateTo({
					url: '/pages/user/base_info',
					events: {
						dataTransfer: data => {
							this.summary.resume.personal = data.model;
							this.summary.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: this.summary.resume.personal
						});
					}
				});
			},
			openCustomerService() {
				console.log('打开企业微信客服');

				// #ifdef APP-PLUS
				// APP端打开企业微信客服链接
				plus.runtime.openURL('https://work.weixin.qq.com/kfid/kfcb52512424213d820', function(res) {
					console.log('打开客服链接失败');
					uni.showToast({
						title: '客服功能暂不可用',
						icon: 'none'
					});
				});
				// #endif

				// #ifdef H5
				// H5端直接打开链接
				window.open('https://work.weixin.qq.com/kfid/kfcb52512424213d820', '_blank');
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user_img {
		width: 132rpx;
		height: 132rpx;
		border: 3rpx solid #FFFFFF;
		border-radius: 50%;
	}

	.svg-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background: #f0f0f0;
	}

	.lh66 {
		line-height: 66rpx;
	}

	.switch_nav {
		width: 165rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 29rpx;
		font-size: 26rpx;
		color: var(--primary);

		image {
			width: 22rpx;
			height: 22rpx;
		}
	}

	.dot {
		position: relative;

		&::after {
			content: '';
			width: 13rpx;
			height: 13rpx;
			background: #FF5656;
			border: 1px solid #FFFFFF;
			position: absolute;
			border-radius: 50%;
			top: 8rpx;
			right: -6rpx;
		}
	}

	.mid_box {
		background: #FFFFFF;
		width: 690rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 30rpx;
		.ico {
			width: 56rpx;
			height: 55rpx;
		}
	}

	.box {
		width: 690rpx;

		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 0 22rpx 0 40rpx;
		margin-top: 20rpx;
	}

	.mt80 {
		margin-top: 80rpx;
	}

	.ico22 {
		width: 22rpx;
		height: 22rpx;
	}

	.box1 {
		width: 690rpx;
		height: 178rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;

		.ico_comp {
			width: 118rpx;
			height: 118rpx;
		}
	}

	.red_cir {
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		font-size: 20rpx;
		color: #fff;
		min-width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		padding: 0 5rpx;
		box-sizing: border-box;
		background-color: #FF0000;
		border-radius: 50%
	}

	.part_item {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		padding: 30rpx 0
	}

	.part_item view:nth-child(1) {
		width: 70rpx;
		height: 70rpx;
		display: block;
		margin: 0 auto 15rpx;
		position: relative
	}

	.part_item image {
		width: 100%;
		height: 100%;
		display: block
	}

	.chat_btn image {
		width: 34rpx;
		height: 34rpx;
		display: block
	}

	.chat_btn .red_cir {
		top: 36rpx;
		left: 34rpx;
		right: auto
	}

	.chat_btn {
		padding-top: 36rpx;
	}

	.mine_img {
		width: 81rpx;
		height: 78rpx;
	}

	.mine_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.info_img {
		width: 35rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.info_item {
		line-height: 115rpx;
		border-bottom: 1rpx solid #F3F3F3
	}

	.info_item:nth-last-child(1) {
		border-bottom: 0;
	}

	/* 微信小程序客服按钮样式 */
	.contact-btn {
		width: 100%;
		background: transparent;
		padding: 0;
		margin: 0;
		text-align: left;
		border: none;
		display: flex;
		align-items: center;
	}

	.contact-btn::after {
		border: none;
	}
</style>